<template>
  <div class="white-paper-container">
    <div>
      <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleQuery">创建项目</el-button>
    </div>
    <el-table
      :data="tableData"
      style="width: 100%"
      :row-style="{height: '200px'}"
      :cell-style="{padding: '10px'}"
      show-header="false"
    >
      <el-table-column
        v-for="(item, index) in tableData"
        :key="index"
      >
        <template slot-scope="scope">
          <div class="paper-card">
            <img :src="scope.row.coverImage" class="cover-image" alt="封面图片">
            <div class="paper-info">
              <div class="paper-title">{{ scope.row.title }}</div>
              <div class="paper-author">作者: {{ scope.row.author }}</div>
              <div class="paper-date">创建时间: {{ scope.row.createTime }}</div>
              <div class="paper-outline">大纲: {{ scope.row.outline }}</div>
              <div class="paper-summary">汇编: {{ scope.row.summary }}</div>
            </div>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 10, 20]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 5,
      total: 20,
      tableData: [],
      allData: []
    }
  },
  created() {
    this.generateMockData();
    this.updateTableData();
  },
  methods: {
    generateMockData() {
      // 生成模拟数据
      for (let i = 1; i <= 20; i++) {
        this.allData.push({
          id: i,
          title: `白皮书标题 ${i}`,
          author: `作者 ${i}`,
          createTime: `2023-01-${i < 10 ? '0' + i : i}`,
          outline: `大纲内容 ${i}`,
          summary: `调研汇编 ${i}`,
          coverImage: `https://picsum.photos/150/200?random=${i}`
        });
      }
    },
    updateTableData() {
      // 根据分页更新显示的数据
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      this.tableData = this.allData.slice(start, end);
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.updateTableData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.updateTableData();
    }
  }
}
</script>

<style scoped>
.white-paper-container {
  padding: 20px;
}

.paper-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  padding: 10px;
  box-sizing: border-box;
}

.cover-image {
  width: 100%;
  height: 120px;
  object-fit: cover;
  margin-bottom: 10px;
}

.paper-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.paper-title {
  font-weight: bold;
  margin-bottom: 5px;
}

.paper-author,
.paper-date,
.paper-outline,
.paper-summary {
  font-size: 12px;
  color: #666;
  margin-bottom: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
